<main id="collections">
    <div class="head">
        <div class="back" on:click={back}>
            <Icon data={angleLeft} scale="2"/>			
        </div>
 
    </div>
    <div class="measure">
        <div class="title_content"></div>
    </div>
    {#if collections.length==0}
        <div style="padding: 10rem;">
            <SkFoldingCube></SkFoldingCube> 
        </div>
    {/if}
    <div class="content" on:scroll={contentScroll}>
        <div class="collections">
            <div class="titles">
                {#each collections as {title,photos_count,media_count,id},index}
                    <div class="title_content">
                        <div class="title_content_head">
                            <div class="title">{title}</div>
                            <div class="count">
                                {photos_count} / {cacheDatas[id]&&cacheDatas[id].list.length||0}
                                {cacheDatas[id]&&cacheDatas[id].list.length==photos_count?'☀️':'☁️'}
                            </div>
                        </div>
                        <div class="collection" on:scroll={(e)=>{
                            collectionScroll(e,id)
                        }}>
                            {#if cacheDatas[id]&&cacheDatas[id].list}
                                {#each cacheDatas[id].list as {src},index}
                                <div class="collection_item" on:click={()=>{
                                    selectImg(id,index)
                                }}>
                                    <Image className="collection_item_img" url={src.small}></Image>
                                </div>
                                {/each}
                                {:else}
                                <div class="loadingCollection">
                                    <SkFoldingCube></SkFoldingCube>
                                </div>
                            {/if}
                        </div>
                    </div>
                {/each}
            </div>
        </div>
    </div>
    <Previews list={previewsList} showPreviewIndex={showPreviewIndex} bind:this={PreviewsComponent}></Previews>
</main>
<script>
    import "./CollectionsGlobal.css"
    import Icon from 'svelte-awesome';
    import {push, pop, replace} from 'svelte-spa-router'
    import {angleLeft,search} from 'svelte-awesome/icons';
    import {getDataFeatured,getDataFeaturedD} from "../../units/http";
    import List from "../../component/List.svelte"
    import Previews from "../../component/Previews.svelte"
	import Progress from "../../component/Progress.svelte"
    import Image from "../../component/Image.svelte"
    import { onMount } from "svelte";
    import SkFoldingCube from "../../component/SkFoldingCube.svelte"
    let index=1;
    let isNoData="someData"
    let collections =[];
    let cellHeight=0;
    let cacheDatas={};
    let getDataIds=[]
    let iObserver=null;
    let isGetList=false;
    let previewsList=[];
    let showPreviewIndex=1;
    let PreviewsComponent;
    onMount(()=>{
        cellHeight=document.querySelector(".measure").offsetHeight
        
    })
    function getFeatured(){
        if(isGetList)return;
        isGetList=true;
        return getDataFeatured({
			page:index,
			per_page:40
		}).then((info)=>{
            isGetList=false;
            let list = info.data.collections.map((item)=>{
                if(item.photos_count!=0){
                    return item
                }
            }).filter(Boolean)
            collections.push(...list); 
            collections=collections
		})
    }
    getFeatured().then(()=>{
        getInViewData(0)
    })
    async function getFeaturedD(id,page){
        try{
            let info=await getDataFeaturedD(id,{
                type:"photos",
                page:page,
                per_page:40,
            });
            return info
        }catch(e){
            console.error("异常")
        }
        
    }
    function imgLoading(){

    }
    function imgLoadComplete(){
        
    }
    function previewImg(){

    }
    function back(){
        pop();
    }
    let isLoading=false;
    function getDataQueue(){
       
        if(isLoading){
            return;
        }
        let id=getDataIds[0]
        if(!id){
            return;
        }
        if(!cacheDatas[id]){
            cacheDatas[id]={
                page:1,
                list:[]
            }
            isLoading=true;
            getFeaturedD(id,cacheDatas[id].page).then((info)=>{
                isLoading=false;
                cacheDatas[id].page+=1;
                cacheDatas[id].list.push(...info.data.media);
                getDataIds=getDataIds.filter((item)=>{
                    return item!=id
                })
                getDataQueue();
                console.log("剩余",getDataIds.length)
            })
        } else{
            isLoading=false;
            getDataIds=getDataIds.filter((item)=>{
                return item!=id
            })
            getDataQueue();
        }
    }

    let getInViewDataTimeout=null;
    function getInViewData(scrollTop){
        let contentDOM=document.querySelector(".content");
        let endNum=parseInt(contentDOM.offsetHeight/cellHeight)+2;
        let activeIndex = parseInt(scrollTop/cellHeight)
        let activeEndIndex=activeIndex+endNum;

        clearTimeout(getInViewDataTimeout)
        getInViewDataTimeout=setTimeout(function(){
            console.log(activeIndex,activeEndIndex,"------------")
            for(let i=activeIndex;i<=activeEndIndex;i++){
                if(collections[i]&&collections[i].id){
                    getDataIds.unshift(collections[i].id)
                }
            }
            getDataIds=[...new Set(getDataIds)];
            getDataQueue();
        },100)

    }
    function contentScroll(e){
        let dom=e.target
        getInViewData(dom.scrollTop)
        const clientHeight = dom.clientHeight;
        const scrollTop = dom.scrollTop;
        const scrollHeight = dom.scrollHeight;
        if (clientHeight + scrollTop === scrollHeight) {
            console.log('竖向滚动条已经滚动到底部')
            index+=1;
            getFeatured();
        }
    }
    
    function collectionScroll(e,id){
        let dom=e.target
        const clientWidth = dom.clientWidth;
        const scrollLeft = dom.scrollLeft;
        const scrollWidth = dom.scrollWidth;
        if (clientWidth + scrollLeft === scrollWidth) {
            console.log('横向滚动条')
            getFeaturedD(id,cacheDatas[id].page).then((info)=>{
                cacheDatas[id].page+=1;
                cacheDatas[id].list.push(...info.data.media);
                cacheDatas[id].list=cacheDatas[id].list
                cacheDatas=cacheDatas;
                collections=collections;
            })
        }
    }

    function selectImg(id,index){
        previewsList=cacheDatas[id].list;
        showPreviewIndex=index;
        console.log(previewsList,index,"previewsList")
        PreviewsComponent.ctrl(true)
    }
</script>
<style src="./Collections.css"></style>